<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03_元素属性操作</title>
		<!--
		元素属性操作：针对固定属性、附加属性操作
	元素：  固定属性---清楚：元素是否可用属性【w3c元素出现设置属性】
	       附加属性---清楚：表单为主，附加属性checked\disableed..
	prop() ---功能与attr类似，附加属性，针对表单，默认选中
	removeProp() ---功能与removeAttr相似，附加属性，针对表单，移除选中
		 -->
<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>prop()和removeProp()函数使用</h1>
		<!-- 复选框，默认选中  id="myCheckBox"
		三个按钮：   id="getProBtn"   获取属性
		            id="setProBtn"   设置属性
					id="removeProBtn"   移除属性
		弹出文字显示： div id="output"
		-->
	<input type="checkbox" id="myCheckBox" checked/>	
	<button id="getProBtn">获取属性</button>
	<button id="setProBtn">设置属性</button>
	<button id="removeProBtn">移除属性</button>
	<div id="output"></div>
	<script>
		/* prop()   点击--获取属性--打印复选框的值
					  复选框的值是：+变量
		prop("checked")--input元素--checked属性
		*/
		$("#getProBtn").click(function(){
		//prop()获取元素的附加属性--input中checked
		var isChecked=$("#myCheckBox").prop("checked");
		$("#output").text("复选框的值是："+isChecked);
		});
		//prop("checked",flase) 取消选中
		$("#setProBtn").click(function(){
		$("#myCheckBox").prop("checked",false);
		$("#output").text("复选框的值是：false");
		});
		//removeProp()  取消选中--删除checked属性
		$("#removeProBtn").click(function(){
		$("#myCheckBox").removeProp("checked");
		$("#output").text("复选框的属性已经移除");
		});
	</script>
	</body>
</html>